<template>
	<view class="main">
		<view class="banner">
			<u-swiper :list="list" border-radius="16"></u-swiper>
		</view>
		<view class="news">
			<view class="left"></view>
			<view class="cont">最新推出“一台起托”的一站式挖矿服务</view>
			<u-icon name="more-dot-fill"></u-icon>
		</view>
		<view class="content">
			<view class="total_assets">
				<view class="cont">
					<view class="des">总资产(USDT)</view>
					<view class="title">0.00</view>
				</view>
			</view>
			<view class="profit">
				<view class="item">
					<view class="des">今日盈利（USDT）</view>
					<view class="title">0.00</view>
				</view>
				<view class="item">
					<view class="des">累计盈利（USDT）</view>
					<view class="title">0.00</view>
				</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="des">
						<text>BTC/USDT</text>
						<text>+1.37</text>
					</view>
					<view class="title">171881.23</view>
				</view>
				<view class="item">
					<view class="des">
						<text>BTC/USDT</text>
						<text>+1.37</text>
					</view>
					<view class="title">171881.23</view>
				</view>
				<view class="item">
					<view class="des">
						<text>BTC/USDT</text>
						<text class="red">+1.37</text>
					</view>
					<view class="title">171881.23</view>
				</view>
			</view>
			<view class="Tab_nav">
				<view class="item" :class="{active:active==0}" @click="TabClick(0)">火币</view>
				<view class="item" :class="{active:active==1}" @click="TabClick(1)">Binance</view>
				<view class="item" :class="{active:active==2}" @click="TabClick(2)">OKEx</view>
				<view class="item" :class="{active:active==3}" @click="TabClick(3)">比特儿</view>
			</view>
			<view class="Tab_cont">
				<view class="item">
					<view class="left">
						<view class="title">
							<text>BTC/USDT</text>
							<text class="tag">单次策略</text>
						</view>
						<view class="cont">
							<text>数量 1.42536</text>
							<text>浮亏</text>
							<text class="red">-1.42536</text>
						</view>
					</view>
					<view class="right red">
						-1.34
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="title">
							<text>ETH/USDT</text>
							<text class="tag">策略循环</text>
						</view>
						<view class="cont">
							<text>数量 1.42536</text>
							<text>浮亏</text>
							<text>+0.1923</text>
						</view>
					</view>
					<view class="right">
						+2.13
					</view>
				</view>
			</view>
		</view>
		<Nav :current='navActive'></Nav>
	</view>
</template>

<script>
	import Nav from '../../component/Nav.vue'
	export default {
		components:{
			Nav
		},
		data() {
			return {
				navActive:0,
				active:0,
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
			}
		},
		onLoad() {

		},
		onShow() {
			
		},
		methods: {
			// 切换列表
			TabClick(e){
				this.active = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background:$G-bg-color;
		.banner{
			padding:28rpx 28rpx 0 28rpx;
			background-color: #FFFFFF;
			uni-swiper{
				height: 260rpx;
			}
		}
		.news{
			padding:24rpx 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			.left{
				width: 28rpx;
				height: 26rpx;
				background:url(../../static/images/ico/gg.png)center center no-repeat;
				background-size: 100%;
			}
			.cont{
				width: calc(100% - 100rpx);
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 24rpx;
				font-weight: 600;
				color: #1A1C22;
				line-height: 34rpx;
				font-family: $G-t-fm;
			}
		}
		
		.content{
			padding: 0 28rpx;
			.total_assets{
				margin-top: 18rpx;
				background: #ffffff url(../../static/images/total_assets.png)right center no-repeat;
				background-size: 272rpx 160rpx;
				.cont{
					padding: 26rpx 0 30rpx 26rpx;
					.des{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						font-family: $G-fm;
					}
					.title{
						margin-top: 12rpx;
						font-size: 50rpx;
						font-weight: bold;
						color: #333333;
						line-height: 58rpx;
						font-family: $G-t-fm;
					}
				}
			}
			.profit{
				display: flex;
				justify-content: space-between;
				margin-top: 18rpx;
				.item{
					padding: 20rpx 26rpx 28rpx 26rpx;
					width: 340rpx;
					height: 140rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					.des{
						
						font-size: 24rpx;
						font-family: $G-fm;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}
					.title{
						margin-top: 10rpx;
						font-size: 40rpx;
						font-family: $G-t-fm;
						font-weight: bold;
						color: #333333;
						line-height: 48rpx;
					}
				}
			}
			.list{
				display: flex;
				justify-content: space-between;
				padding: 22rpx;
				height: 120rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin-top: 16rpx;
				.des{
					font-size: 22rpx;
					font-family: $G-fm;
					font-weight: 400;
					color: #333333;
					line-height: 32rpx;
					text:nth-child(2){
						font-size: 24rpx;
						font-weight: 600;
						color: #04AD8F;
						line-height: 34rpx;
					}
					text:nth-child(2).red{
						color: #D04C64;
					}
				}
				.title{
					font-size: 28rpx;
					font-family: $G-t-fm;
					font-weight: 600;
					color: #333333;
					line-height: 40rpx;
				}
			}
			.Tab_nav{
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #F5F6F7;
				background-color: #FFFFFF;
				padding: 0 36rpx;
				border-radius:16rpx 16rpx 0 0;
				margin-top: 18rpx;
				.item{
					padding: 28rpx 0 26rpx 0;
					font-family: $G-t-fm;
					position: relative;
					font-size: 24rpx;
					font-weight: 600;
					color: #999999;
					line-height: 34rpx;
				}
				.item.active{
					font-size: 28rpx;
					color: #131415;
					line-height: 40rpx;
				}
				.item.active:after{
					content:'';
					width: 36rpx;
					height: 6rpx;
					background: #2F73FD;
					border-radius: 3rpx;
					position: absolute;
					left: calc(50% - 18rpx);
					bottom:0;
				}
			}
			.Tab_cont{
				background: #FFFFFF;
				border-radius:0 0 16rpx 16rpx;
				margin-bottom: 72rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28rpx 22rpx 28rpx 38rpx;
					border-bottom: 2rpx solid #F5F5F5;
					.left{
						.title{
							margin-bottom: 10rpx;
							text{
								font-size: 28rpx;
								font-family: $G-t-fm;
								font-weight: 600;
								color: #000000;
								line-height: 40rpx;
							}
							.tag{
								font-size: 20rpx;
								font-family: $G-fm;
								font-weight: 400;
								color: #0066EC;
								line-height: 28rpx;
								padding: 2rpx 12rpx;
								background: rgba(47, 115, 253, 0.1);
								border-radius: 6rpx;
								margin-left: 10rpx;
							}
						}
						.cont{
							text{
								font-size: 24rpx;
								font-family: $G-fm;
								font-weight: 400;
								color: #000000;
								line-height: 34rpx;
							}
							text:first-child{
								margin-right: 18rpx;
							}
							text:nth-child(3){
								color: #04AD8F;
							}
							text:nth-child(3).red{
								color: #D04C64;
							}
						}
					}
					.right{
						padding: 12rpx 40rpx;
						background: #01BF9A;
						border-radius: 6rpx;
						font-size: 24rpx;
						font-family: $G-fm;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 34rpx;
					}
					.right.red{
						background: #E4516C;
					}
				}
			}
		}
	}
</style>
